import React from 'react';
import {
  View,
  Text,
  StyleSheet,
  Image,
  ScrollView,
  TouchableOpacity,
  SafeAreaView,
  StatusBar,
} from 'react-native';
import Icon from 'react-native-vector-icons/MaterialIcons';

interface RoomDetailProps {
  navigation: any;
  route: any;
}

const RoomDetailScreen: React.FC<RoomDetailProps> = ({ navigation, route }) => {
  const roomInfo = {
    title: '豪华大床房',
    price: 598.00,
    tags: ['全景', '全新装修', '海景'],
    details: {
      area: '65平方米',
      bedSize: '1.8m×2m',
      maxGuests: '2人',
      bedType: '都市豪床',
      breakfast: '含早餐',
      cancellation: '不可取消',
    },
    facilities: [
      { icon: 'luggage', name: '行李托管' },
      { icon: 'beach-access', name: '休闲娱乐' },
      { icon: 'pool', name: '游泳池' },
      { icon: 'restaurant', name: '餐饮服务' },
      { icon: 'tv', name: '娱乐柜' },
      { icon: 'wifi', name: '酒店wifi' },
      { icon: 'bathtub', name: '浴缸' },
      { icon: 'ac-unit', name: '吹风机' },
    ],
  };

  const reviews = [
    {
      id: 1,
      avatar: require('./image/avatar1.jpg'),
      name: '探险仁',
      rating: 5,
      comment: '太棒了！从未体验过如此完美的酒店！',
    },
    {
      id: 2,
      avatar: require('./image/avatar1.jpg'),
      name: '探险仁',
      rating: 5,
      comment: '太棒了！从未体验过如此完美的酒店！',
    },
    {
      id: 3,
      avatar: require('./image/avatar1.jpg'),
      name: '探险仁',
      rating: 5,
      comment: '太棒了！从未体验过如此完美的酒店！',
    },
  ];

  return (
    <SafeAreaView style={styles.container}>
      <StatusBar barStyle="dark-content" />
      
      {/* 头部 */}
      <View style={styles.header}>
        <TouchableOpacity 
          style={styles.backButton} 
          onPress={() => navigation.goBack()}
        >
          <Icon name="arrow-back" size={24} color="#333" />
        </TouchableOpacity>
        <Text style={styles.headerTitle}>房型介绍</Text>
        <View style={styles.headerRight}>
          <TouchableOpacity>
            <Icon name="share" size={24} color="#333" />
          </TouchableOpacity>
        </View>
      </View>

      <ScrollView style={styles.content}>
        {/* 房间图片 */}
        <Image
          source={require('./image/room1.jpg')}
          style={styles.roomImage}
        />

        {/* 房间标题和标签 */}
        <View style={styles.roomInfo}>
          <View style={styles.titleRow}>
            <Text style={styles.roomTitle}>{roomInfo.title}</Text>
            <View style={styles.tagsContainer}>
              {roomInfo.tags.map((tag, index) => (
                <View key={index} style={styles.tag}>
                  <Text style={styles.tagText}>{tag}</Text>
                </View>
              ))}
            </View>
          </View>
          <Text style={styles.price}>¥ {roomInfo.price}</Text>
        </View>

        {/* 房间详细信息 */}
        <View style={styles.detailsContainer}>
          <Text style={styles.sectionTitle}>房型信息</Text>
          <View style={styles.detailsGrid}>
            <View style={styles.detailItem}>
              <Text style={styles.detailLabel}>房间面积</Text>
              <Text style={styles.detailValue}>{roomInfo.details.area}</Text>
            </View>
            <View style={styles.detailItem}>
              <Text style={styles.detailLabel}>床型</Text>
              <Text style={styles.detailValue}>{roomInfo.details.bedSize}</Text>
            </View>
            <View style={styles.detailItem}>
              <Text style={styles.detailLabel}>可住人数</Text>
              <Text style={styles.detailValue}>{roomInfo.details.maxGuests}</Text>
            </View>
            <View style={styles.detailItem}>
              <Text style={styles.detailLabel}>床品品牌</Text>
              <Text style={styles.detailValue}>{roomInfo.details.bedType}</Text>
            </View>
            <View style={styles.detailItem}>
              <Text style={styles.detailLabel}>早餐含早</Text>
              <Text style={styles.detailValue}>{roomInfo.details.breakfast}</Text>
            </View>
            <View style={styles.detailItem}>
              <Text style={styles.detailLabel}>取消政策</Text>
              <Text style={styles.detailValue}>{roomInfo.details.cancellation}</Text>
            </View>
          </View>
        </View>

        {/* 服务设施 */}
        <View style={styles.facilitiesContainer}>
          <Text style={styles.sectionTitle}>服务设施</Text>
          <View style={styles.facilitiesGrid}>
            {roomInfo.facilities.map((facility, index) => (
              <View key={index} style={styles.facilityItem}>
                <Icon name={facility.icon} size={24} color="#666" />
                <Text style={styles.facilityName}>{facility.name}</Text>
              </View>
            ))}
          </View>
        </View>

        {/* 评论区域 */}
        <View style={styles.reviewsContainer}>
          <View style={styles.reviewHeader}>
            <Text style={styles.sectionTitle}>评论及评价</Text>
            <View style={styles.ratingContainer}>
              <Text style={styles.ratingScore}>5.0</Text>
              <View style={styles.stars}>
                {[1, 2, 3, 4, 5].map((star) => (
                  <Icon key={star} name="star" size={16} color="#FF4B4B" />
                ))}
              </View>
            </View>
          </View>

          {reviews.map((review) => (
            <View key={review.id} style={styles.reviewItem}>
              <Image source={review.avatar} style={styles.reviewerAvatar} />
              <View style={styles.reviewContent}>
                <Text style={styles.reviewerName}>{review.name}</Text>
                <View style={styles.stars}>
                  {[1, 2, 3, 4, 5].map((star) => (
                    <Icon key={star} name="star" size={12} color="#FF4B4B" />
                  ))}
                </View>
                <Text style={styles.reviewText}>{review.comment}</Text>
              </View>
            </View>
          ))}
        </View>
      </ScrollView>

      {/* 底部预订按钮 */}
      <TouchableOpacity style={styles.bookButton}>
        <Text style={styles.bookButtonText}>预定</Text>
      </TouchableOpacity>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: 15,
    height: 50,
    backgroundColor: '#fff',
    borderBottomWidth: 1,
    borderBottomColor: '#f0f0f0',
  },
  backButton: {
    padding: 8,
  },
  headerTitle: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#333',
  },
  headerRight: {
    width: 40,
    alignItems: 'flex-end',
  },
  content: {
    flex: 1,
  },
  roomImage: {
    width: '100%',
    height: 200,
    resizeMode: 'cover',
  },
  roomInfo: {
    padding: 15,
    backgroundColor: '#fff',
  },
  titleRow: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: 10,
  },
  roomTitle: {
    fontSize: 20,
    fontWeight: 'bold',
    color: '#333',
  },
  tagsContainer: {
    flexDirection: 'row',
  },
  tag: {
    backgroundColor: '#f5f5f5',
    paddingHorizontal: 8,
    paddingVertical: 2,
    borderRadius: 4,
    marginLeft: 8,
  },
  tagText: {
    fontSize: 12,
    color: '#666',
  },
  price: {
    fontSize: 24,
    color: '#FF4B4B',
    fontWeight: 'bold',
  },
  detailsContainer: {
    padding: 15,
    backgroundColor: '#fff',
    marginTop: 10,
  },
  sectionTitle: {
    fontSize: 16,
    fontWeight: 'bold',
    color: '#333',
    marginBottom: 15,
  },
  detailsGrid: {
    flexDirection: 'row',
    flexWrap: 'wrap',
  },
  detailItem: {
    width: '33.33%',
    marginBottom: 15,
  },
  detailLabel: {
    fontSize: 14,
    color: '#666',
    marginBottom: 5,
  },
  detailValue: {
    fontSize: 14,
    color: '#333',
  },
  facilitiesContainer: {
    padding: 15,
    backgroundColor: '#fff',
    marginTop: 10,
  },
  facilitiesGrid: {
    flexDirection: 'row',
    flexWrap: 'wrap',
  },
  facilityItem: {
    width: '25%',
    alignItems: 'center',
    marginBottom: 20,
  },
  facilityName: {
    fontSize: 12,
    color: '#666',
    marginTop: 5,
  },
  reviewsContainer: {
    padding: 15,
    backgroundColor: '#fff',
    marginTop: 10,
  },
  reviewHeader: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: 15,
  },
  ratingContainer: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  ratingScore: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#333',
    marginRight: 10,
  },
  stars: {
    flexDirection: 'row',
  },
  reviewItem: {
    flexDirection: 'row',
    marginBottom: 15,
    paddingBottom: 15,
    borderBottomWidth: 1,
    borderBottomColor: '#f0f0f0',
  },
  reviewerAvatar: {
    width: 40,
    height: 40,
    borderRadius: 20,
    marginRight: 10,
  },
  reviewContent: {
    flex: 1,
  },
  reviewerName: {
    fontSize: 14,
    color: '#333',
    marginBottom: 5,
  },
  reviewText: {
    fontSize: 14,
    color: '#666',
    marginTop: 5,
  },
  bookButton: {
    backgroundColor: '#FF4B4B',
    padding: 15,
    alignItems: 'center',
  },
  bookButtonText: {
    color: '#fff',
    fontSize: 16,
    fontWeight: 'bold',
  },
});

export default RoomDetailScreen; 